<template>
	<view class="page ">
		<u-swiper @click="toSlide" :list="banner" mode="rect" name="image" interval="5000" height="400"></u-swiper>
		<view class="p15">
			<view v-for="(item,index) in list" @click="toInfo(item)" :key="index" class="bg-white p12 u-flex brs5 mb10"
				style="align-items: flex-start;">
				
				<view class="pl12 u-f1 pt2">
					<view class="u-flex u-f-jsb">
						<view class="fz16 u-font-bold u-line-2">
						{{item.name}}<u-icon @click.stop="toCall(item.mobile)" v-if="item.mobile" style="margin-left: 10rpx;" name="phone" class="#666"></u-icon>
						</view>
						<view class="ml5 c6 u-flex">
							<image src="../../static/image/ic-nav.png"
								style="width: 32rpx;height: 32rpx;margin-right: 4rpx;">
								{{item.far}}
						</view>
					</view>
					<view class="fz13 c6 mt10">
						<u-icon name="clock" class="#666"></u-icon><span class="ml2">{{item.time}}</span>
					</view>
					<view class="fz13 c6 mt10 u-flex" style="position: relative;">
						<u-icon name="map" class="#666"></u-icon><span class="ml2 u-line-1"
							style="width: 280rpx;">{{item.address}}</span>

						<view class="btn" @click.stop="toMap(item)">导航</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				banner: [],
				loadStatus: '',
				list: []
			}
		},
		computed: {},
		onShow() {

			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					this.longitude = res.longitude
					this.latitude = res.latitude
					this.initData()
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail: (res) => {
					this.initData()
				},
			});
			this.$api.adList({type:1}, res => {
				if (res.code) {
					this.banner = res.data
				}
			})
			
			this.getAuth()

		},
		// 页面下拉到底部触发
		onReachBottom() {},
		methods: {
			toCall(phone){
				
					
					
					uni.makePhoneCall({
						phoneNumber:phone
					})
			},
			getAuth(){
				
				uni.getSetting({
				  success(res) {
				    if (!res.authSetting['scope.userLocation']) {
				      // 位置权限未授权
				      uni.authorize({
				        scope: 'scope.userLocation',
				        success() {
				          // 用户已授权
				          console.log('位置权限已授权');
				        },
				        fail() {
				          // 用户拒绝授权
				          uni.showModal({
				            title: '提示',
				            content: '此功能需要获取您的位置信息，请确认授权',
				            success: function(modalRes) {
				              if (modalRes.confirm) {
				                uni.openSetting({
				                  success: function(settingRes) {
				                    if (settingRes.authSetting['scope.userLocation']) {
				                      // 用户在设置页授权成功
				                      console.log('位置权限在设置页授权成功');
				                    }
				                  }
				                })
				              }
				            }
				          });
				        }
				      });
				    } else {
				      // 位置权限已授权
				      console.log('位置权限已授权');
				    }
				  }
				});
			},
			toMap(item) {
				
				uni.openLocation({
					latitude: Number(item.latitude),
					longitude: Number(item.longitude),
					name:item.name,
					address:item.address,
					success: function() {
						console.log('success');
					},fail(err) {
						console.log(err);
						
					}
				});
			},
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id
				})
			},
			initData() {
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {


				this.$api.shopList({
					page: this.page,
					latitude: this.latitude,
					longitude: this.longitude
				}, res => {
					if (res.code) {

						let _list = res.data.data

						this.list = [...this.list, ..._list]

						console.log(this.list)
						// 判断所有数据是否请求完毕
						if (res.data.total > this.list.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		background: #4CA8E7;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		padding: 14rpx 32rpx;
		position: absolute;
		right: 0;
		top: -20rpx;
	}
</style>